<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单管理系统</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" href="./css/OMs.css">
</head>

<body>
    <div id="app">
        <div class="container">
            <div class="order-sheet">
                <h2 class="mtb10">订单栏</h2>
                <div class="order-title flex mtb10">
                    <p @click="orderFlag='current-order'" :class="orderFlag=='current-order'?'underline':''" style="cursor:pointer">当前订单</p>
                    <p @click="orderFlag='pending-order'" :class="orderFlag=='pending-order'?'underline':''" style="cursor:pointer">挂单中</p>
                    <p @click="orderFlag='paid-order'" :class="orderFlag=='paid-order'?'underline':''" style="cursor:pointer">已付款</p>
                    <p @click="orderFlag='cancelled-order'" :class="orderFlag=='cancelled-order'?'underline':''" style="cursor:pointer">取消的订单</p>
                </div>
                <component :is="orderFlag" :current-list='currentList' @add='add' @sub='sub' @del='del'></component>
            </div>

            <div class="product-sheet">
                <h2>产品栏</h2>
                <div class="menu-title flex">
                    <div @click="toggleFlag='frequently-food'" :class="toggleFlag=='frequently-food'?'underline':''">常点食品</div>
                    <div @click="toggleFlag='main-menu'" :class="toggleFlag=='main-menu'?'underline':''">主菜单</div>
                </div>
                <component :is="toggleFlag" :list="list" :current-list='currentList' @add='addClick'></component>
            </div>

           
        </div>
    </div>
    </div>

    <script type="module" src="./js/index.js"></script>
</body>

</html>